import HOCLogin from '../../utils/HOCLogin';

import React, {
  useState, //为函数式组件提供【状态管理】
  useEffect, //为函数式组件提供想【生命周期一样的函数】
} from 'react'

import axios from "axios";

function Message() {
  const [list, setList] = useState([]); //购物车列表数据
  const [allCheck, setAllCheck] = useState(false) //全选---默认值为false
  let [totalNum, setTotalNum] = useState(0); //总数
  let [totalPrice, setTotalPrice] = useState(0); //总价


  // ❤ useEffect相当于class组件的componentDidMount和componentDidDate生命周期函数，可以在里面发起请求，初始化滚动等
  // 参数1：一个【函数】，可以执行请求等
  // 参数2： 一个【数组】，监听数据改变后执行参数1的函数。如果是空数组，则会加载之后执行一次
  // 请求数据
  useEffect(() => {
    axios.get("/cartList").then(res => {
      setList(res.data);
    })
  }, [])

  // 5.计算总数和总价
  const total = () => {
    // 总数
    totalNum = list.reduce((sum, item) => {
      if (item.isCheck) {
        sum += item.num
      }
      return sum;
    }, 0)
    setTotalNum(totalNum)

    // 总价 
    totalPrice = list.reduce((sum, item) => {
      if (item.isCheck) {
        sum += item.num * item.price
      }
      return sum;
    }, 0)
    setTotalPrice(totalPrice.toFixed(2)) //总价保留两位小数
  }

  //1. 点击数量加
  const addNum = (id) => {
    list.forEach(item => {
      if (item.id === id) {
        item.num++
      }
    })
    setList([...list]) //重新生成一个新的数组，解构进去
    total()
  }

  // 2. 点击数量减  --- 减到1按钮禁用
  const reduceNum = (id) => {
    list.forEach(item => {
      if (item.id === id) {
        item.num--
      }
    })
    setList([...list]) //重新生成一个新的数组，解构进去
    total()

  }

  // 3. 点击全选 --- 因为是复选框，所以得【双向数据绑定】
  const onAllCheck = (e) => {
    console.log("e.target.checked", e.target.checked);
    setAllCheck(e.target.checked)  //传的是复选框的选中状态
    list.forEach(item => {
      item.isCheck = e.target.checked  //把这个值赋给每一项之前的复选框
    })
    total()
    // setList([...list])
  }

  // 4. 反选【点击每一项前面的复选框，所有的列表复选框被选中，全选被勾选】  ---- 每一个列表前面的复选框【双向数据绑定】
  const onCheckItem = (id) => {
    // 先取消或者选中一个
    list.forEach(item => {
      if (item.id === id) {
        item.isCheck = !item.isCheck;
      }
    })

    // 根据列表中每一项的复选框状态，获取全选状态 
    // 【every】返回的值都为真，结果为真；有一个为假，结果为假
    let all = list.every(item => item.isCheck)
    setAllCheck(all) //全选状态重新赋值
    setList([...list])
    total()
  }


  return (
    <div className='shopCart'>
      {/* 1. 头部全选按钮  */}
      <div className="title">
        <input type="checkbox" checked={allCheck} onChange={onAllCheck} />全选
      </div>

      {/* 2. 中间购物车商品列表  */}
      <div className="shopList">
        {
          list.length ?
            list.map(item => {
              return <li key={item.id}>
                <input type="checkbox"
                  checked={item.isCheck} //列表项之前的复选框有自己的状态
                  onChange={() => { onCheckItem(item.id) }}
                />
                <img src={item.img} alt="" />
                <div>
                  <h4>{item.title}</h4>
                  <p>￥{item.price}元</p>
                  <div>
                    {/* 减到1，按钮禁用  */}
                    <button disabled={item.num <= 1} onClick={() => { reduceNum(item.id) }}>-</button>
                    <b>{item.num}</b>
                    <button onClick={() => { addNum(item.id) }}>+</button>
                  </div>
                </div>
              </li>
            }) : "购物车暂无数据"
        }
      </div>

      {/* 3. 底部全选，总价和结算按钮 */}
      <div className="bottom">
        <input type="checkbox" checked={allCheck} onChange={onAllCheck} />
        <b>总计：{totalNum}</b>
        <button disabled={totalNum === 0}>结算{totalPrice}</button>
      </div>
    </div>
  )
}

export default HOCLogin(Message)